@import 'reset.scss';
$const:750/6.4rem;
@mixin flex($direction:column, $inline:block) {
    display: if($inline==block, flex, inline-flex);
    flex-direction: $direction;
    flex-wrap: wrap;
}

$mainBgColor:#FE7213;
@mixin appHeaer($bgColor:#FE7213, $color:#fff) {
    @include flex('row');
    align-items: center;
    height: 80/$const;
    line-height: 80/$const;
    background: $bgColor;
    padding-left: 15/$const;
    color: $color;
    span {
        font-size: 40/$const;
    }
    b {
        margin-left: 6/$const;
        font-size: 30/$const;
        font-weight: normal;
    }
}

@mixin appHeaderNoColor() {
    position: relative;
    height: 80/$const;
    line-height: 80/$const;
    background: $mainBgColor;
    //  padding-left: 15/$const;
    text-align: center;
    .left {
        position: absolute;
        top: 0;
        left: 30/$const;
        color: #fff;
        span {
            font-size: 50/$const;
        }
        b {
            position: relative;
            top: -8/$const;
            left: -4/$const;
            font-size: 30/$const;
            font-weight: normal;
        }
    }
    .title {
        font-size: 30/$const;
        font-weight: bold;
        letter-spacing: 1.5px;
        color: #fff;
    }
}

.app_header_no_color {
    @include appHeaderNoColor;
}

.app_header {
    @include appHeaer;
}

.footer_active {
    color: #FF8116;
}

@mixin navbar() {
    .navbar {
        @include flex('row');
        position: fixed;
        left: 0px;
        right: 0px;
        bottom: 0px;
        padding: 12/$const 0 8/$const 0;
        background: #fff;
        li {
            flex: 1;
            a {
                display: block;
                width: 100%;
                text-align: center;
                img {
                    width: 44/$const;
                    height: 45/$const;
                }
                p {
                    margin-top: 6/$const;
                    color: #9BA0B5;
                    font-size: 22/$const;
                }
            }
        }
    }
}

body {
    font-size: 26/$const;
}

//CECapp首页
.index {
    background: #F7F6FA;
    .header {
        width: 100%;
        //  height: 439/$const;
        padding: 77/$const 35/$const 23/$const 35/$const;
        background: linear-gradient(0deg, #FB8D40 0%, #FF6600 100%);
        .userInfo {
            @include flex('row');
            margin-bottom: 69/$const;
            align-items: center;
            img {
                width: 137/$const;
                height: 137/$const;
                border-radius: 50%;
            }
            .info {
                margin-left: 19/$const;
                p {
                    line-height: 38/$const;
                    font-size: 26/$const;
                    color: #fff;
                }
            }
        }
        .tab {
            @include flex('row');
            li {
                flex: 1;
                a {
                    display: block;
                    width: 100%;
                    text-align: center;
                    img {
                        width: 56/$const;
                        height: 50/$const;
                    }
                    p {
                        margin-top: 23/$const;
                        color: #FFFFFF;
                    }
                }
            }
        }
    }
    .main {
        .banner {
            width: 100%;
            height: 200/$const;
        }
        .iconbar {
            @include flex('row');
            li {
                margin-top: 64/$const;
                margin-bottom: 75/$const;
                width: 50%;
                align-items: center;
                a {
                    display: block;
                    width: 100%;
                    text-align: center;
                    img {
                        width: 100/$const;
                        height: 102/$const;
                    }
                    p {
                        margin-top: 23/$const;
                        color: #454545;
                        font-size: 35/$const;
                    }
                }
            }
            li:nth-child(1) a img {
                width: 92/$const;
                height: 102/$const;
            }
            li:nth-child(1) a p {
                margin-top: 26/$const;
            }
            li:nth-child(2) a img {
                width: 100/$const;
                height: 81/$const;
                margin-top: 21/$const;
            }
            li:nth-child(2) a p {
                margin-top: 26/$const;
            }
            li:nth-child(3) a img {
                width: 84/$const;
                height: 69/$const;
            }
            li:nth-child(3) a p {
                margin-top: 28/$const;
            }
            li:nth-child(4) a img {
                width: 73/$const;
                height: 77/$const;
            }
            li:nth-child(4) a p {
                margin-top: 23/$const;
            }
        }
        //收購中心的樣式
        .bug_center {
            padding: 112/$const 20/$const 100/$const 20/$const;
            li {
                margin-top: 19/$const;
                a {
                    display: block;
                    @include flex('row');
                    justify-content: space-between;
                    align-items: center;
                    padding: 8/$const 45/$const 8/$const 60/$const;
                    background: #fff;
                    div {
                        @include flex('row');
                        align-items: center;
                        span {
                            margin-left: 50/$const;
                            font-size: 37/$const;
                            color: #FC8432;
                        }
                        //                      img{
                        //                          width: 20/$const;
                        //                          height: 104/$const;
                        //                      }
                        p {
                            width: 10/$const;
                            height: 104/$const;
                            box-shadow: 0px 4/$const 20/$const 0px rgba(251, 88, 88, 0.5);
                            border-radius: 5px;
                        }
                        .one {
                            background: linear-gradient(0deg, rgba(252, 112, 184, 1), rgba(251, 88, 88, 1));
                        }
                        .two {
                            background: linear-gradient(0deg, rgba(238, 203, 10, 1), rgba(252, 149, 149, 1));
                        }
                        .three {
                            background: linear-gradient(5deg, rgba(62, 160, 247, 1), rgba(126, 129, 249, 1));
                        }
                        .four {
                            background: linear-gradient(3deg, rgba(167, 131, 248, 1), rgba(251, 88, 88, 1));
                        }
                    }
                    .img_one {
                        width: 56/$const;
                        height: 58/$const;
                    }
                    .img_two {
                        width: 61/$const;
                        height: 51/$const;
                    }
                    .img_three {
                        width: 43/$const;
                        height: 56/$const;
                    }
                    .img_four {
                        width: 44/$const;
                        height: 61/$const;
                    }
                }
            }
        }
    }
    .footer {
        @include navbar;
    }
}

//财务中心
.finance_center {
    .main {
        .list {
            @include flex('row');
            justify-content: space-between;
            padding: 89/$const 35/$const;
            li {
                margin-top: 36/$const;
                a {
                    display: block;
                    width: 320/$const;
                    height: 158/$const;
                    line-height: 158/$const;
                    text-align: center;
                    border-radius: 20px;
                    color: #fff;
                    //                  background-size: 100% 100%;
                    img {
                        width: 100%;
                        height: auto;
                    }
                }
            }
        }
    }
}

//宝石明细
.stone_detail {
    .main {
        .title {
            width: 100%;
            height: 84/$const;
            line-height: 84/$const;
            background: $mainBgColor;
            >span {
                float: right;
                margin-right: 60px;
                font-size: 35/$const;
                color: #FEFEFE;
                b{
                    font-weight: normal;
                }
                b:first-child{
                    margin-right: 15/$const;
                }
            }
        }
        .list {
            padding: 30/$const;
            li {
                border-bottom:1px solid rgba(181,181,181,1);;
                a {
                    @include flex('row');
                    height: 125/$const;
                    justify-content: space-between;
                    align-items: center;
                    >div {
                        @include flex('row');
                        align-items: center;
                        img {
                            width: 57/$const;
                            height: 55/$const;
                        }
                        >div{
                            margin-left: 38/$const;
                            h3{
                                font-size: 25/$const;
                                color: #010101;
                            }
                            p{
                                margin-top: 17/$const;
                               font-size: 20/$const;
                               color: #323232; 
                            }
                        }
                    }
                    >span{
                        margin-right: 43/$const;
                        font-size: 50/$const;
                        color: #010101;
                    }
                }
            }
        }
    }
}

//购物车
.buy_car{
    background: #F7F6FA;
    .main{
        .title{
            @include flex('row');
            height: 64/$const;
            background: #FAFCFB;
            align-items: center;
            li{
                flex: 1;
                text-align: center;
                font-size: 20/$const;
                color: #4C4C4C;
                span{
                    color: #FF5172;
                }
            }
        }
        .list{
            height: 991/$const;
            overflow: scroll;
            padding-bottom: 160/$const;
            li{
                a{
                    @include flex('row');
                    align-items: center;
                    justify-content:flex-start;
                    padding: 37/$const  0 25/$const  0;
                    border-bottom: 1px solid rgba(210,210,210,1);;
                    .left{
                        position: relative;
                        padding: 0 26/$const 0 46/$const;
                       .empty{
                            font-size: 39/$const;
                            color: #535353;
                       } 
                       .active{
//                         position: absolute;
//                         top: 0;
//                         left: 46/$const;
                           font-size: 39/$const;
                           color: #FE7213;
                       }
                    }
                    .middle{
                        img{
                            width: 138/$const;
                            height: 138/$const;
                        }
                    }
                    .right{
                        width: 421/$const;
                        @extend .oneline;
                        margin-left: 29/$const;
                        h3{
                            font-size: 28/$const;
                            font-weight: 400;
                            color: #4C4C4C;
                        }
                        .price{
                            @include flex('row');
                            justify-content: space-between;
                            margin-top: 42/$const;
                            >span{
                                margin-top: 14/$const;
                                font-size: 28/$const;
                                color: #FF4E6C;
                                b{
                                    font-size: 33/$const;
                                }
                            }
                            .num{
                                span{
                                    float:left;
                                     width: 55/$const;
                                    height: 55/$const;
                                    line-height: 40/$const;
                                    border:2px solid rgba(210,210,210,1);
                                    text-align: center;
                                    font-size: 48/$const;
                                    color: #9F9F9F;
                                }
                                input{
                                    float:left;
                                    width: 80/$const;
                                    height: 55/$const;
                                    font-size: 33/$const;
                                    color: #4B4B4B;
                                    text-align: center;
                                    border:2px solid rgba(210,210,210,1);
                                    border-right:none;
                                    border-left: none;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .footer{
        @include flex('row');
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 152/$const;
        padding: 30/$const 0;
        background: #FAFCFB;
        .left{
            width: 139/$const;
            margin-top: 15/$const;
            text-align: center;
            font-size: 25/$const;
            color: #909090;
        }
        .middle{
            width: 337/$const;
            text-align: right;
            font-size: 25/$const;
            color: #909090;
           p{
                span{
                    font-size: 30/$const;
                    color: #FF4E6C;
                }   
           }
           p:first-child{
               margin-top: 8/$const;
               margin-bottom:24/$const;
           }
        }
        .right{
            a{
                display: block;
                width: 200/$const;
                height: 100/$const;
                margin-left: 42/$const;
                line-height:100/$const;
                text-align: center;
                background: #FE7213;
                font-size: 30/$const;
                color: #FFFFFF;
            }
        }
    }
}
